<template>
	<div class="items-box">
		<div class="items">试题年份：{{ year || '- -' }}</div>
		<div class="items">所属地区：{{ areaText || '- -' }}</div>
		<template v-for="item in labelList">
			<div
				class="items"
				v-if="type !== 'parent' || ['试题分类','适用范围'].includes(item.labelName)"
				:key="item.labelId"
			>
				{{ item.labelName }}：{{ item.labelDetailName || '- -' }}
			</div>
		</template>
	</div>
</template>

<script>
	export default {
		props: {
			// 试题类型 parent复合题题干，child复合题子题，normal普通题
			type: {
				type: String,
				default: "normal"
			},
			// 年份
			year: {
				type: String,
				default: ""
			},
			// 地区列表
			areaList: {
				type: Array,
				default: () => []
			},
			// 标签列表
			labelList: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			areaText() {
				return this.areaList.map((i) => i.cityName).join("、");
			}
		}
	};
</script>

<style lang="less" scoped>
	.items-box {
		display: flex;
		flex-wrap: wrap;
		line-height: 1.5;

		.items {
			background: #f5f7f9;
			border: 1px solid #e3e5e7;
			border-radius: 4px;
			padding: 6px 12px;
			font-size: 12px;
			margin: 0 10px 10px 0;
			display: inline-block;
			color: #666;
		}
	}
</style>
